<!--  产品碳足迹-碳足迹结果  -->
<template>
  <div class="">
    <section class="cardBox2">
      <div class="box1">
        <div class="box1_left">
          <div class="box1_left_tr1">
            <div class="box1_left_tr1_text1"> {{ generateResultData.productName }}</div>
            <div class="box1_left_tr1_text2">
              <img class="box1_left_tr1_text2_icon" src="@assets/img/img39.png" alt=""/>
              {{$t('message.Data_cycle')}}：
              {{ generateResultData.beginTime ? generateResultData.beginTime.slice(0, 10) : '' }}
              {{$t('message.to')}}
              {{ generateResultData.endTime ? generateResultData.endTime.slice(0, 10) : '' }}
            </div>
          </div>
          <div class="box1_left_tr2">
            <div class="box1_left_tr2_text1">
              {{ queryParam.calculateNumber }}{{ queryParam.productUnitName }}{{ generateResultData.productName }}
              <span v-if="generateResultData.lifeCycleType == 1">{{$t('message.From_cradle_to_gate')}}</span>
              <span v-else-if="generateResultData.lifeCycleType == 2">{{$t('message.From_cradle_to_grave')}}</span>
              <span v-else-if="generateResultData.lifeCycleType == 3">{{$t('message.Customize')}}</span>
            </div>
            <div class="box1_left_tr2_text2">
              <div class="box1_left_tr2_text2_label"> {{$t('message.Accountant')}}：</div>
              <div class="box1_left_tr2_text2_text"> {{ generateResultData.createBy }}</div>
            </div>
            <div class="box1_left_tr2_text2">
              <div class="box1_left_tr2_text2_label"> {{$t('message.Result_generation_date')}}：</div>
              <div class="box1_left_tr2_text2_text"> {{ generateResultData.updateTime }}</div>
            </div>
          </div>
        </div>
        <div class="box1_right">
          <!-- 查看碳足迹报告 -->
          <div class="box1_right_btn1 m_hoverCP" @click="openReportModal(1)" v-if="generateResultData.reportAddress">
            {{$t('message.View_the_carbon_footprint_report')}}
          </div>
          <!-- 生成碳足迹报告 -->
          <div class="box1_right_btn1 m_hoverCP" @click="openReportModal(2)" v-if="!generateResultData.reportAddress">
            {{$t('message.Generate_a_carbon_footprint_report')}}
          </div>
          <!-- 生成碳足迹标签 -->
          <div class="box1_right_btn1 m_hoverCP" @click="openReportModal(3)"  v-if="!generateResultData.labelAddress">
            {{$t('message.Generate_carbon_footprint_labels')}}
          </div>
          <!-- 查看碳足迹标签 -->
          <div class="box1_right_btn1 m_hoverCP" @click="openReportModal(4)" v-if="generateResultData.labelAddress">
            {{$t('message.Check_the_carbon_footprint_label')}}
          </div>
          <a-popconfirm :title="$t('message.Confirm_filing')" :cancelText="$t('message.Cancel')"
            :okText="$t('message.Confirm')" @confirm="() => onArchive()" v-if="queryParam.calculateArchived === '0'">
            <div class="box1_right_btn2 m_hoverCP"> {{$t('message.Archive')}}
            </div>
          </a-popconfirm>
          <div class="box1_right_btn2" v-if="queryParam.calculateArchived === '1'"> {{$t('message.Archived')}}
          </div>
        </div>
      </div>
    </section>
    <!--  碳足迹结果-产品碳足迹  -->
    <section class="cardBox2">
      <div class="cardBox2_title"> {{$t('message.Product_carbon_footprint')}}</div>
      <div class="box2">
        <div class="box2_tr1"> {{$t('message.Greenhouse_gas_emissions_generated_during_the_product_life_cycle')}}</div>
        <div class="box2_tr2">
          <div class="box2_tr2_text1"> {{$t('message.Total_emission')}}</div>
          <div class="box2_tr2_text2"> {{ generateResultData.cptzjValue }}</div>
          <div class="box2_tr2_text3"> kgCO₂e</div>
        </div>
        <div class="box2_tr3">
          <div class="box2_tr3_item" v-for="(itemA,indexA) in generateResultData.detailList" :key="indexA">
            <div class="box2_tr3_item_tr1">
              <div class="box2_tr3_item_tr1_left">
                <img class="box2_tr3_item_tr1_left_icon" src="@assets/img/img40.png" alt=""
                     v-if="itemA.name == '原材料获取'"/>
                <img class="box2_tr3_item_tr1_left_icon" src="@assets/img/img41.png" alt=""
                     v-else-if="itemA.name == '生产制造'"/>
                <img class="box2_tr3_item_tr1_left_icon" src="@assets/img/img42.png" alt=""
                     v-else-if="itemA.name == '分销和储存'"/>
                <img class="box2_tr3_item_tr1_left_icon" src="@assets/img/img37.png" alt=""
                     v-else-if="itemA.name == '产品使用'"/>
                <img class="box2_tr3_item_tr1_left_icon" src="@assets/img/img38.png" alt=""
                     v-else-if="itemA.name == '废弃处置'"/>
                <div class="box2_tr3_item_tr1_left_text"> {{ itemA.name }}</div>
              </div>
              <div class="box2_tr3_item_tr1_right"> {{ itemA.proportion || 0 }}%</div>
            </div>
            <div class="box2_tr3_item_tr2">
              <div class="box2_tr3_item_tr2_text1"> {{ itemA.total }}</div>
              <div class="box2_tr3_item_tr2_text2"> kgCO₂e</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--  碳足迹结果-排放排行  -->
    <section class="cardBox2">
      <div class="cardBox2_title"> {{$t('message.Emission_rank')}}</div>
      <section class="chartBox">
        <a-tabs :activeKey="activeKey" @change="onChangeActiveKey">
          <a-tab-pane key="1" :tab="$t('message.By_list')" forceRender>
            <div class="tabInnerBox">
              <div class="chart1" id="chart_bar_qd"></div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="$t('message.By_type')" forceRender>
            <div class="tabInnerBox">
              <div class="chart1" id="chart_bar_lx"></div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" :tab="$t('message.By_process')" forceRender>
            <div class="tabInnerBox">
              <div class="chart1" id="chart_bar_gx"></div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" :tab="$t('message.By_link')" forceRender>
            <div class="tabInnerBox">
              <div class="chart1" id="chart_bar_hj"></div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </section>
    </section>
    <!--  碳足迹结果-碳足迹清单  -->
    <section class="cardBox2">
      <div class="m_cbFlex">
        <div class="cardBox2_title"> {{$t('message.Carbon_footprint_list')}}</div>
        <div class="uploadBtn m_hoverCP" @click="onExport">
          <img class="uploadBtn_icon " src="@assets/img/img31.png" alt=""/>{{$t('message.Export')}}
        </div>
      </div>
      <div class="collapseBox">
        <a-collapse v-model="activeCollapseKey" :bordered="false">
          <template #expandIcon="props">
            <img class="collapseIcon" src="@assets/img/img46.png" alt="" v-if="props.isActive"/>
            <img class="collapseIcon" src="@assets/img/img48.png" alt="" v-else/>
          </template>
          <a-collapse-panel :header="itemA.name" :style="customStyle"
                            v-for="(itemA,indexA) in generateResultData.detailList" :key="String(indexA)">
            <div class="collapseExtraText" slot="extra">
              <div class="collapseExtraText_text1">{{ itemA.name }}{{$t('message.stage_carbon_footprint')}}：</div>
              <div class="collapseExtraText_text2">{{$t('message.subtotal')}}</div>
              <div class="collapseExtraText_text3">{{ itemA.total }}</div>
              <div class="collapseExtraText_text4">kgCO₂e</div>
            </div>
            <div class="collapseInnerBox">
              <a-collapse v-model="itemA.activeCollapseKey" :bordered="false">
                <template #expandIcon="props">
                  <img class="collapseIcon" src="@assets/img/img46.png" alt="" v-if="props.isActive"/>
                  <img class="collapseIcon" src="@assets/img/img48.png" alt="" v-else/>
                </template>
                <a-collapse-panel :header="itemB.name?itemB.name:'空工序'" :style="customStyle"
                                  v-for="(itemB,indexB) in itemA.childList" :key="String(indexB)">
                  <div class="collapseExtraText2" slot="extra">
                    <div class="collapseExtraText2_text1">{{ itemB.name?itemB.name:'空工序' }}：</div>
                    <div class="collapseExtraText2_text2">{{$t('message.subtotal')}}</div>
                    <div class="collapseExtraText2_text3">{{ itemB.total }}</div>
                    <div class="collapseExtraText2_text4">kgCO₂e</div>
                  </div>
                  <div class="collapseInnerBox2">
                    <a-table :columns="columns" :dataSource="itemB.detailList" :pagination="false" :bordered="false"
                             size="middle" style="background: #ffffff">
                    </a-table>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </section>

    <!--  碳足迹报告弹窗  -->
    <a-modal :title="$t('message.Carbon_footprint_report')" :visible="reportModalVisible" @ok="closeReportModal" @cancel="closeReportModal">
      <a-spin :spinning="createReportIng">
        <div class="flecCenter">
          <div class="modalFlexs">
            <img src="@assets/carbon/img14.png" alt=""/>
            <div>{{ generateResultData.productName }}-{{$t('message.Carbon_footprint_report')}}</div>
          </div>
          <a-button type="primary" icon="download" size="large" @click="onDownloadReport" v-if="generateResultData.reportAddress">{{$t('message.Download')}}</a-button>
          <a-button type="primary" icon="download" size="large" @click="onCreateReport" v-else>{{$t('message.Generate')}}</a-button>
          <div class="modalFlexs1 m_hoverCP" @click="onReStart">
            <div>{{$t('message.Regenerate')}}</div>
            <img src="@assets/carbon/img15.png" alt=""/>
          </div>
          <div class="flwMondes">{{$t('message.Last_generation_date')}}：{{ generateResultData.reportTime }}</div>
        </div>
      </a-spin>
    </a-modal>

<!--  碳足迹标签弹窗  -->
    <a-modal :title="$t('message.Check_the_carbon_footprint_label')" okText='下载' :visible="isGenerateAssIng" @ok="onDareUrl(generateResultData)" @cancel="closeReportModal">
      <a-spin :spinning="createReportIng">
        <div class="flecCenter">
          <img :src="getAvatarView(generateResultData.labelAddress)" class="theCarbonImg" alt="" />
          <div class="flwMondes">
            {{ $t("message.Generation_time") }}:{{ generateResultData.labelTime }}
          </div>
        </div>
      </a-spin>
    </a-modal>

<!--  碳足迹标签弹窗  -->
     <section class="m_popupBox" v-if="isGenerateAss">
      <GenerateAcarbonfootprintReport ref="generatres" @back="onBack" />
    </section>

<!--  碳足迹报告弹窗  -->
     <section class="m_popupBox" style="overflow: hidden;" v-if="GenerateAcar">
        <GenerateAcarbonfoot ref='eneratecares' @back="onBack" />
      </section>
  </div>
</template>

<script>
import { downFile, getAction, getFileAccessHttpUrl, postAction } from '@api/manage'
import {cloneObject} from '@/utils/util'
import * as echarts from "echarts";
import {commonBarChartOption} from "@/common/constKey";
import GenerateAcarbonfootprintReport from "@/views/module_footprint/carbonFootprintLabel/module/index.vue";
import GenerateAcarbonfoot from "@/views/module_managePlatform/GenerateAcarbonfoot/index.vue";

export default {
  name: 'carbonFootprintResults',
  props: {
    generateResultData: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    },
    queryParam: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  components: {
    GenerateAcarbonfootprintReport,
    GenerateAcarbonfoot
  },
  data() {
    return {
      isGenerateAss:false,
      activeKey: '1', // 1按清单/ 2按类型/ 3按工序 / 4按环节
      customStyle:
          'background: #FFFFFF;border-radius: 0px;margin-bottom: 0;border-bottom: none;overflow: hidden;',
      columns: [{
        title: '名称',
        align: 'center',
        dataIndex: 'name',
        width: 150,
      }, {
        title: '类型',
        align: 'center',
        dataIndex: 'type',
        width: 150,
      }, {
        title: '数量单位',
        align: 'center',
        dataIndex: 'numberUnit',
        width: 150,
      }, {
        title: '因子值',
        align: 'center',
        dataIndex: 'factorValue',
        width: 200,
      }, {
        title: '排放量',
        align: 'center',
        dataIndex: 'emissionsVolume',
        width: 150,
      }, {
        title: '运输排放量',
        align: 'center',
        dataIndex: 'transportVolume',
        width: 150,
      }, {
        title: '总占比',
        align: 'center',
        dataIndex: 'proportion',
        width: 150,
      }],
      reportModalVisible: false, // 碳足迹报告弹窗是否显示
      createReportIng: false, // 碳足迹报告弹窗加载状态
      isGenerateAssIng:false,//标签
      GenerateAcar:false,//报告
      activeCollapseKey: [],
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  methods: {
    // this.$emit('changeStep', 3, true)
    onBack() {
      this.GenerateAcar = false;
      this.isGenerateAss = false;
      this.$emit('changeStep', 3, true)
    },
    // onBockGenerateAcar() {
    //   this.$emit('changeStep', 3, true)
    // },
    /**
     * 碳足迹结果-绘制图表
     */
    drawCharts(generateResultData) {
      console.log('drawCharts', generateResultData)
      if (generateResultData.emissionRanking && generateResultData.emissionRanking.length > 0) {
        generateResultData.emissionRanking.forEach(item => {
          if (item.typeName == '按清单') {
            this.drawLine1(item.listKey, item.listValue)
          }
          if (item.typeName == '按类型') {
            this.drawLine2(item.listKey, item.listValue)
          }
          if (item.typeName == '按工序') {
            this.drawLine3(item.listKey, item.listValue)
          }
          if (item.typeName == '按环节') {
            this.drawLine4(item.listKey, item.listValue)
          }
        })
      }
    },
    /**
     * 下载
     */
    onDareUrl(generateResultData){
      console.log(111)
      let url = window._CONFIG['staticDomainURL'] + "/" +  generateResultData.labelAddress
      console.log('onDareUrl', url)
      window.open(url, '_blank')
      // this.downloadImage(url)
    },
    // downloadImage(url, filename = 'image.png') {
    //   fetch(url)
    //     .then(response => response.blob())
    //     .then(blob => {
    //       const blobUrl = window.URL.createObjectURL(blob);
    //       const a = document.createElement('a');
    //       a.href = blobUrl;
    //       a.download = filename;
    //       document.body.appendChild(a);
    //       a.click();
    //       window.URL.revokeObjectURL(blobUrl); // 清理内存
    //       document.body.removeChild(a);
    //     })
    //     .catch(error => {
    //       console.error('下载失败:', error);
    //     });
    // },
    /**
     * 按清单【柱状图】
     */
    drawLine1(labelData, valueData) {
      console.log('drawLine1')
      let chart_bar_qd = echarts.init(
          document.getElementById('chart_bar_qd')
      )
      let option = commonBarChartOption('#F99550', labelData, valueData)
      //使用制定的配置项和数据显示图表
      chart_bar_qd.setOption(option)
    },
    /**
     * 按类型【柱状图】
     */
    drawLine2(labelData, valueData) {
      console.log('drawLine2')
      let chart_bar_lx = echarts.init(
          document.getElementById('chart_bar_lx')
      )
      let option = commonBarChartOption('#F99550', labelData, valueData)
      //使用制定的配置项和数据显示图表
      chart_bar_lx.setOption(option)
    },
    /**
     * 按工序【柱状图】
     */
    drawLine3(labelData, valueData) {
      console.log('drawLine3')
      let chart_bar_gx = echarts.init(
          document.getElementById('chart_bar_gx')
      )
      let option = commonBarChartOption('#F99550', labelData, valueData)
      //使用制定的配置项和数据显示图表
      chart_bar_gx.setOption(option)
    },
    /**
     * 按环节【柱状图】
     */
    drawLine4(labelData, valueData) {
      console.log('drawLine2')
      let chart_bar_hj = echarts.init(
          document.getElementById('chart_bar_hj')
      )
      let option = commonBarChartOption('#F99550', labelData, valueData)
      //使用制定的配置项和数据显示图表
      chart_bar_hj.setOption(option)
    },
    /**
     * 碳足迹结果-碳足迹报告弹窗-打开
     */
    openReportModal(type) {
      console.log('openReportModal', this.generateResultData)
      console.log('openReportModal', this.queryParam)
      if(type==1){
        this.reportModalVisible = true;
      }else if (type == 2) {
        this.GenerateAcar=true
        this.$nextTick(()=>{
          this.$refs.eneratecares.type= 2
          this.$refs.eneratecares.gonsixx.a= this.generateResultData.productPic
          this.$refs.eneratecares.gonsixx.b= this.generateResultData.flowChart
          this.$refs.eneratecares.gonsixx.c= this.generateResultData.productIntroduction
          this.$refs.eneratecares.gonsixx.d= this.generateResultData.orgContent
          this.$refs.eneratecares.gonsixx.e= this.generateResultData.orgAddress
          this.$refs.eneratecares.formObj.calculateId = this.queryParam.id
          this.$refs.eneratecares.getReportParams();
        })

      }else if (type == 3) {
        this.isGenerateAss=true
        this.$nextTick(()=>{
          this.$refs.generatres.type = 3;
          this.$refs.generatres.getProductList(1);
          this.$refs.generatres.disable=true;
          this.$refs.generatres.queryParam.productId=this.generateResultData.productId;
          this.$refs.generatres.queryParam.calculateId=this.queryParam.id;
          this.$refs.generatres.getFinishCalculateList(1);
        })
      }else{
        this.isGenerateAssIng=true
      }
    },
    /**
     * 碳足迹结果-重新生成
     */
    onReStart(){
      console.log('openReportModal', this.queryParam)
      this.reportModalVisible=false
      this.GenerateAcar = true;
      setTimeout(()=>{
        this.$nextTick(()=>{
          this.$refs.eneratecares.type= 2
          this.$refs.eneratecares.formObj.calculateId = this.queryParam.id
          this.$refs.eneratecares.getReportParams();
        })
      },100)
    },
    /**
     * 碳足迹结果-碳足迹报告弹窗-关闭
     */
    closeReportModal() {
      this.reportModalVisible = false;
      this.isGenerateAssIng=false
    },
    /**
     * 碳足迹结果-生成碳足迹报告
     */
    onCreateReport() {
      this.createReportIng = true
      postAction('/cyFootprintReport/saveOrUpdateReport', {
        calculateId: this.queryParam.id
      }).then(res => {
        if (res.success) {
          this.$message.success('生成碳足迹报告成功')
          this.$emit('changeStep', 3, true)
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.createReportIng = false
      })
    },
    /**
     * 碳足迹结果-下载碳足迹报告
     */
    onDownloadReport() {
      let url = window._CONFIG['staticDomainURL'] + "/" +  this.generateResultData.reportAddress
      console.log('onDownloadReport', url)
      window.open(url, '_blank')
      // this.exportXlsTemplate()
    },
    // /**
    //  *下载报告
    //  */
    // exportXlsTemplate() {
    //   downFile(window._CONFIG["domianURL"] + this.generateResultData.reportAddress, "", "post").then((data) => {
    //     if (!data) {
    //       this.$message.warning("文件下载失败");
    //       return;
    //     }
    //     let fileName = "模版dawdawd";
    //     if (typeof window.navigator.msSaveBlob !== "undefined") {
    //       window.navigator.msSaveBlob(
    //           new Blob([data], {type: "application/vnd.ms-excel"}),
    //           fileName + ".docx"
    //       );
    //     } else {
    //       let url = window.URL.createObjectURL(
    //           new Blob([data], {type: "application/vnd.ms-excel"})
    //       );
    //       let link = document.createElement("a");
    //       link.style.display = "none";
    //       link.href = url;
    //       link.setAttribute("download", fileName + ".docx");
    //       document.body.appendChild(link);
    //       link.click();
    //       document.body.removeChild(link); //下载完成移除元素
    //       window.URL.revokeObjectURL(url); //释放掉blob对象
    //     }
    //   });
    // },
    /**
     * 碳足迹结果-归档
     */
    onArchive() {
      console.log('onArchive', this.generateResultData)
      postAction('/footprintProduct/cyFootprintProduct/calculateArchived', {
        calculateId: this.queryParam.id
      }).then(res => {
        if (res.success) {
          this.$message.success('归档成功')
          this.$emit('archive')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * 切换tab
     * @param key 1按清单/ 2按类型/ 3按工序 / 4按环节
     */
    onChangeActiveKey(key) {
      console.log('onChangeActiveKey', key);
      this.activeKey = key
    },
    /**
     * 获取图片
     * @param avatar
     * @returns {*}
     */
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar);
    },
    /**
     * 碳足迹结果-碳足迹清单-导出
     */
    onExport() {
      console.log('onExport', this.generateResultData)
      getAction('/cyFootprintReport/createPdf', {
        calculateId: this.queryParam.id
      }).then(res => {
        if (res.success) {
          this.$message.success('导出碳足迹清单成功')
          setTimeout(() => {
            let url = window._CONFIG['domianURL'] + res.result
            console.log('createPdf', url)
            window.open(url, '_blank')
          }, 500)

        } else {
          this.$message.error(res.message)
        }
      })
    },

  },
};

</script>

<style lang="less" scoped>

.theCarbonImg {
  width: 279px;
  height: 375px;
}
.flecCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;

  .flwMondes {
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }

  .modalFlexs {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    div {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
  }

  .modalFlexs1 {
    display: flex;
    align-items: center;

    img {
      width: 12px;
      height: 12px;
      margin-left: 6px;
    }

    div {
      font-weight: 400;
      font-size: 12px;
      color: #888888;
    }
  }

}

.cardBox2 {
  margin: 24px 300px auto;
  overflow: hidden;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 3px;
}

.cardBox2_title {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
}

.box1 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .box1_left {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .box1_left_tr1 {
    display: flex;
    align-items: center;
  }

  .box1_left_tr1_text1 {
  }

  .box1_left_tr1_text2 {
    display: flex;
    align-items: center;
    margin-left: 26px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }

  .box1_left_tr1_text2_icon {
    margin-right: 4px;
    width: 14px;
    height: 14px;
  }

  .box1_left_tr2 {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 34px;
  }

  .box1_left_tr2_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box1_left_tr2_text2 {
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
  }

  .box1_left_tr2_text2_label {
    color: #777777;
  }

  .box1_left_tr2_text2_text {
    color: #333333;
  }

  .box1_right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .box1_right_btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    // width: 132px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #148958;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #148958;
  }

  .box1_right_btn2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    // width: 89px;
    height: 32px;
    background: #148958;
    border-radius: 3px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
  }
}

.box2 {
  .box2_tr1 {
    margin-top: 10px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }

  .box2_tr2 {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
  }

  .box2_tr2_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box2_tr2_text2 {
    margin-left: 9px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #148958;
    line-height: 24px;
  }

  .box2_tr2_text3 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
  }

  .box2_tr3 {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;

    .box2_tr3_item {
      box-sizing: border-box;
      padding: 14px 16px;
      background: #FAFAFA;
      border-radius: 2px;
    }

    .box2_tr3_item_tr1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .box2_tr3_item_tr1_left {
      display: flex;
      align-items: center;
    }

    .box2_tr3_item_tr1_left_icon {
      margin-right: 4px;
      width: 16px;
      height: 16px;
    }

    .box2_tr3_item_tr1_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #333333;
    }

    .box2_tr3_item_tr1_right {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #333333;
    }

    .box2_tr3_item_tr2 {
      margin-top: 15px;
      display: flex;
      align-items: center;
    }

    .box2_tr3_item_tr2_text1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }

    .box2_tr3_item_tr2_text2 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #777777;
    }
  }
}

.chartBox {
  margin-top: 14px;
  width: 100%;

  .tabInnerBox {
    //padding: 8px 24px 0;
  }

  .chart1 {
    width: 100%;
    height: 400px;
    //border: 1px solid red;
  }

  .chartBox {
    display: flex;
    justify-content: space-between;
  }

  #chart_bar_qd {

  }

  #chart_bar_lx {

  }

  #chart_bar_gx {

  }

  #chart_bar_hj {

  }
}


.uploadBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 84px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #148958;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #148958;

  .uploadBtn_icon {
    width: 16px;
    height: 16px;
  }
}


.collapseBox {
  margin-top: 22px;

  /deep/ .ant-collapse-header {
    border-bottom: 1px solid #E7E7E7;
  }

  /deep/ .ant-collapse-content-box {
    //padding: 0;
    padding: 0 0 0 22px !important;
  }

  .collapseIcon {
    width: 16px;
    height: 16px;
  }

  .collapseInnerBox {
    /deep/ .ant-collapse-content-box {
      padding: 0 !important;
    }
  }

  .collapseInnerBox2 {
    padding: 24px;
    background: #F5F7F6;
  }

  .collapseExtraText {
    display: flex;
    align-items: flex-end;

    .collapseExtraText_text1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }

    .collapseExtraText_text2 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #333333;
    }

    .collapseExtraText_text3 {
      margin-left: 4px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #148958;
    }

    .collapseExtraText_text4 {
      margin-left: 4px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .collapseExtraText2 {
    display: flex;
    align-items: center;

    .collapseExtraText2_text1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #888888;
    }

    .collapseExtraText2_text2 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #888888;
    }

    .collapseExtraText2_text3 {
      margin-left: 4px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
    }

    .collapseExtraText2_text4 {
      margin-left: 4px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #888888;
    }
  }
}

</style>
